<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		
		 <div id="one">
		 	<div class="ones"></div>
		 	<div class="loading"></div>
		 </div>
		 
		 <div id="two">
		 	<div class="twoa"></div>
		 	<div class="twob"></div>
		 	<div class="twoc"></div>
		 	<div class="twod"></div>
		 	<div class="twoe"></div>
		 	<div class="twof"></div>
		 	<div class="twog"></div>
		 	<div class="twoh"></div>
		 	<div class="twoi"></div>
		 	<div class="twoj"></div>
		 	<div class="twok"></div>
		 </div>
		
		<div id="bag">
			
		<div class="three tong">
			<div class="threea"></div>
			<div class="threeb"></div>
			<div class="threec"></div>
		</div>
		
		<div class="four tong">
			<div class="foura"></div>
			<div class="fourb"></div>
			<div class="fourc"></div>
			<div class="fourd"></div>
			<div class="foure"></div>
			<div class="fourf"></div>
			<div class="fourg"></div>
		</div>
		
		<div class="five tong">
			<div class="fivea"></div>
			<div class="fiveb"></div>
			<div class="fivec"></div>
			<div class="fived"></div>
		</div>
		
		<div class="six tong">
			<div class="sixa"></div>
			<div class="sixb"></div>
			<div class="sixc"></div>
			<div class="sixd"></div>
		</div>
		
		<div class="seven tong">
			<div class="sevena"></div>
			<div class="sevenb"></div>
			<div class="sevenc"></div>
		</div>
		
		<div class="eight tong">
			<div class="eighta"></div>
			<div class="eightb"></div>
			<div class="eightc"></div>
		</div>
		
		</div>
		
		<div id="ABC">
			<div class="nobeA"></div>
			<div class="nobeB"></div>
			<div class="nobeC"></div>
			<div class="dui"></div>
			<div class="cuo"></div>
			<div class="dui1"></div>
			<div class="cuo1"></div>
			<div class="dui2"></div>
			<div class="cuo2"></div>
			<div class="time">60s</div>	
		</div>
		
		<div id="nice">
			<p class="nicea"></p>
			<p class="niceb">再玩一次</p>
		</div>
		
		<script src="preloadjs.min.js"></script>
		<script>
			var answerTime;
			var flag=false;
			 /*动态改变根元素字体大小*/
        function recalc() {
            var clientWidth = document.documentElement.clientWidth;
            if(!clientWidth) return;
            document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
                                        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
        }
        
        //获取 开始游戏 按钮
        var twof = document.querySelector(".twof");
        var two = document.querySelector("#two");
        var three = document.querySelector("#three");
        var ABC = document.querySelector("#ABC");
        var k = 0;
        //添加点击事件 开始游戏 
        twof.addEventListener("click",function(){
        	two.style.display="none";
        	bag.style.display="block";
        	ABC.style.display="block";
        	//调用定时器
        	countDown(59);
        	// 资源src地址
			audio.src=ress[k].audio;
        	audio.play();
        	nobeA.innerText=ress[k].item[0];
         	nobeB.innerText=ress[k].item[1];
         	nobeC.innerText=ress[k].item[2];
         	console.log(ress[k].answer)
         	k++;
         	if(flag==false){
         		answerTime=new Date().getTime();
         		flag=true;
         	}
         	
        })
        
        function e(){
        	console.log(nobeA);
        }
        //再玩一次
        var niceb = document.querySelector(".niceb");
        var dui = document.querySelector(".dui");
        var cuo = document.querySelector(".cuo");
        var dui1 = document.querySelector(".dui1");
        var cuo1 = document.querySelector(".cuo1");
        var dui2 = document.querySelector(".dui2");
        var cuo2 = document.querySelector(".cuo2");
        niceb.addEventListener("click",function(){
        	window.location.reload();
        })
         // 点击切换题目歌曲
         var nobeA = document.querySelector(".nobeA");
         var nobeB = document.querySelector(".nobeB");
         var nobeC = document.querySelector(".nobeC");
       	 var num = 0;
         nobeA.addEventListener("click",function(){
         	if(flag==true){
         		var currentTime=new Date().getTime();
         		flag=false;
         		if((currentTime-answerTime)<2000){
         			alert("请认真听2秒")
         			return;
         		}
         	}
         	var A= ress[k].item[0];
         	var B= ress[k].item[1];
         	var C= ress[k].item[2];
         	var D = 0;
         	if(D==ress[k-1].answer){
         		console.log(true);
         		dui2.style.display="block";
         		setTimeout(function(){
         			dui2.style.display="none";
         		},500);
         		num+=1;
         	}else{
         		console.log(false);
         		cuo2.style.display="block";
         		setTimeout(function(){
         			cuo2.style.display="none";
         		},500);
         	}
         	nobeA.innerText=A;
         	nobeB.innerText=B;
         	nobeC.innerText=C;
			audio.src = ress[k].audio ;
			audio.play();
         	k++; 
         	if(flag==false){
         		answerTime=new Date().getTime();
         		flag=true;
         	}
         });
      	 nobeB.addEventListener("click",function(){
      	 	if(flag==true){
         		var currentTime=new Date().getTime();
         		flag=false;
         		if((currentTime-answerTime)<2000){
         			alert("请认真听2秒")
         			return;
         		}
         	}
         	var A= ress[k].item[0];
         	var B= ress[k].item[1];
         	var C= ress[k].item[2];
         	var D = 1;
         	if(D==ress[k-1].answer){
         		console.log(true);
         		num+=1;
         		dui1.style.display="block";
         		setTimeout(function(){
         			dui1.style.display="none";
         		},500);
         	}else{
         		console.log(false);
         		cuo1.style.display="block";
         		setTimeout(function(){
         			cuo1.style.display="none";
         		},500);
         	}
         	nobeA.innerText=A;
         	nobeB.innerText=B;
         	nobeC.innerText=C;
			audio.src = ress[k].audio ;
			audio.play();
         	k++; 
         	if(flag==false){
         		answerTime=new Date().getTime();
         		flag=true;
         	}
        });
      	 nobeC.addEventListener("click",function(){
      	 	if(flag==true){
         		var currentTime=new Date().getTime();
         		flag=false;
         		if((currentTime-answerTime)<2000){
         			alert("请认真听2秒")
         			return;
         		}
         	}
         	var A= ress[k].item[0];
         	var B= ress[k].item[1];
         	var C= ress[k].item[2];
         	var D = 2;
         	if(D==ress[k-1].answer){
         		console.log(true);
         		dui.style.display="block";
         		setTimeout(function(){
         			dui.style.display="none";
         		},500);
         		num+=1;
         	}else{
         		console.log(false);
         		cuo.style.display="block";
         		setTimeout(function(){
         			cuo.style.display="none";
         		},500);
         	}
         	nobeA.innerText=A;
         	nobeB.innerText=B;
         	nobeC.innerText=C;
			audio.src = ress[k].audio ;
			audio.play();
         	k++; 
         	if(flag==false){
         		answerTime=new Date().getTime();
         		flag=true;
         	}
         });

        
        //定时器倒数  切换背景
        var time = document.querySelector(".time");
        var bag_one = document.querySelectorAll(".tong");
        var nice = document.querySelector("#nice");
        var nicea = document.querySelector(".nicea");
       	 bag_one["2"].style.display="block";
        function countDown(times){
		  var timer; //定时器
		  timer=setInterval(function(){
		    if (times <= 9){
		    	times = '0' + times;
		    } 
		    if (times <= 50){
       	 		bag_one["2"].style.display="none";
		    	bag_one["0"].style.display="block";
		    } 
		    if (times <= 40){
		    	bag_one["1"].style.display="block";
		    	bag_one["0"].style.display="none";
		    } 
		    if (times <= 30){
		    	bag_one["3"].style.display="block";
		    } 
		     if (times <= 20){
		    	bag_one["4"].style.display="block";
		    	bag_one["3"].style.display="none";
		    	bag_one["2"].style.display="none";
		    	bag_one["1"].style.display="none";
		    	bag_one["0"].style.display="none";
		    } 
		     if (times <= 10){
		    	bag_one["5"].style.display="block";
		    } 
		    time.innerText = times +"s";
		    times--;
		    if(times<0){
		    	clearInterval(timer);
		    	bag_one["5"].style.display="none";
		    	bag_one["4"].style.display="none";
		    	bag_one["3"].style.display="none";
		    	bag_one["2"].style.display="none";
		    	bag_one["1"].style.display="none";
		    	bag_one["0"].style.display="none";
        		ABC.style.display="none";
		    	nice.style.display="block";
		    	audio.pause();
		    	nicea.innerText = "猜对"+num+"首";
		  }
		  },1000);
		  
		}
      	var url = "./music.json";
      //加载页  ajax 读取josn数据
      	function get_ajax(url,handle){
      		var xhr = new XMLHttpRequest();//创建对象
      		xhr.open("get",url); //请求的方式
      		xhr.addEventListener("readystatechange",handle); //监听请求的响应 
      		xhr.send();
      	}
      	var one = document.querySelector("#one");
      	var load = document.querySelector(".loading");
//    	console.log(one);

		var audio = new Audio();
      	var arr = [];
      	var ress= [];
      	var arrer = [];
      	get_ajax(url,function(e){
      		var target = e.target;
      		if(target.readyState==4&& target.status==200){
      			var res = JSON.parse(target.response); //得到响应的数据
      			console.log(res);
      			for(var i=0;i<30;i++){
      				 ress.push(res[Math.floor(Math.random()*51)  ]) ;
      				 arr.push(ress[i].audio);
      				 arrer.push(res[i].item);
      			}
      			console.log(arr);
      			console.log(ress);
      			
				   //预加载 资源歌曲
			        //创建预加载对象
					var queue = new createjs.LoadQueue();
			        //添加资源路径
			        queue.loadManifest(arr);
			        queue.on("progress",function(event){
						var progress=(event.progress*100).toFixed(2)+"%";
//			        	load.html(progress);
						load.innerText = "loading"+progress ;
			        })
			        queue.on("complete",function(event){
			        	one.style.display="none";
			        })
      		}
      	})
      	
        

        
        
        
        
		</script>
	</body>
</html>
